<template>
  <v-navigation-drawer
    id="app-drawer"
    app
    dark
    floating
    width="200"
    mobile-break-point="991"
  >
    <v-img :src="image" height="100%">
      <v-layout tag="v-list" fill-height column>
        <v-list-tile avatar>
          <v-list-tile-avatar>
            <ui-icon icon="area-chart"></ui-icon>
          </v-list-tile-avatar>
          <v-list-tile-title>帅帅跨境</v-list-tile-title>
        </v-list-tile>
        <v-divider/>
        <v-list-tile
          v-for="(item, i) in menu"
          :key="i"
          :to="item.path"
          avatar
          class="v-list-item"
        >
          <v-list-tile-action>
            <!-- <v-icon>{{ item.icon }}</v-icon> -->
            <ui-icon :icon="item.icon"></ui-icon>
          </v-list-tile-action>
          <v-list-tile-title v-text="item.name"/>
        </v-list-tile>
      </v-layout>
    </v-img>
  </v-navigation-drawer>
</template>
    
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { mapState, mapActions } from 'vuex';
@Component
export default class Drawer extends Vue {

  @Prop({
    default: () => ([])
  })
  private menu!: Array<any>;


  private image: string = '';

}
</script>

<style lang="less">
#app-drawer {
  .v-list__tile {
    border-radius: 4px;

    &--buy {
      margin-top: auto;
      margin-bottom: 17px;
    }
  }

  .v-image__image--contain {
    top: 9px;
    height: 60%;
  }

  .search-input {
    margin-bottom: 30px !important;
    padding-left: 15px;
    padding-right: 15px;
  }

}
</style>
